<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
<title></title>

<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Optional Bootstrap Theme -->
  <link href="data:text/css;charset=utf-8," data-href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">

<!-- Documentation extras -->
<link href="bootstrap/css/docs.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="bootstrap/js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- Favicons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">

<!-- Placed at the end of the document so the pages load faster -->
<script src="bootstrap/js/jquery.min.js"></script>


  <script src="bootstrap/js/bootstrap.min.js"></script>



  <script src="bootstrap/js/docs.min.js"></script>




         <style type="text/css">
         	#add{
         		width: 50%;
         		height: 600px;
         		margin-left: auto;
         		margin-right: auto;
         	}

         </style>
		<script type="text/javascript">		
		function checkName(){
			//获取用户名输入控件对象的内容
				var txtName = document.getElementById("userName").value;
				//信息提示框
				var sptxtName = document.getElementById("spanUserName");
				if(txtName == null || txtName == ""){
					//验证失败
					isChecked = false;
					//提示信息					
					sptxtName.innerHTML = "请输入姓名！";
					sptxtName.style.color = "#B92C28";
					//msg += "请输入姓名！\n"
//					document.getElementById("txtName").focus();
					//修改标志变量
					return false;
				}else{
					sptxtName.innerHTML="";
					//修改标志变量
					return true;
				}
		}

		
		function checkSex(){
			// 验证性别 是否选择
			// 使用循环验证单选组是否进行了选择
			var radioSex = document.getElementsByName("userSex");
			//遍历所有的单选组件，验证是否进行了选择
			var isChSex = false;
			for(var i =0;i<radioSex.length;i++){
				//判定是否进行了选择
				if(radioSex[i].checked){
					//选择了
					isChSex = true;
					//结束循环
					break;
				}
			}

			
			//信息提示框
			var sptxtSex = document.getElementById("spanUserSex");
			
			//设置性别验证结果
			if(!isChSex){					
				//错误提示信息
				sptxtSex.innerHTML = "请选择性别！";
				sptxtSex.style.color = "#B92C28";				
				return false;
			}else{
				//清空错误提示信息
				sptxtSex.innerHTML = "";
				return true;
			}
	}
	
		function checkPassword(){
			//密码非空验证
				var txtPsw = document.getElementById("userPassword").value;
				
				//信息提示框
				var sptxtPsw = document.getElementById("spanUserPassword");
				if(txtPsw == null || txtPsw == ""){		
					
					//错误提示信息
					//提示信息					
					sptxtPsw.innerHTML = "请输入密码！";
					sptxtPsw.style.color = "#B92C28";
					return false;
				}else{
					//验证通过  清空提示内容
					sptxtPsw.innerHTML = "";
					return true;
				}
		}
		
				function checkPasswordTrue(){
			//密码非空验证
				var txtPswNow = document.getElementById("userPasswordtrue").value;
				
				var txtPswBefor = document.getElementById("userPassword").value;				
				
				//信息提示框
				var sptxtPsw = document.getElementById("spanUserPasswordtrue");
				if(txtPswNow!=txtPswBefor||txtPswNow==null||txtPswNow==""){		
					
					//错误提示信息
					//提示信息					
					sptxtPsw.innerHTML = "两次输入的密码不一样";
					sptxtPsw.style.color = "#B92C28";
					return false;
				}else{
					//验证通过  清空提示内容
					sptxtPsw.innerHTML = "";
					return true;
				}
		}
		
		
				function checkUserTel(){
			//密码非空验证
				var txtPsw = document.getElementById("userTel").value;
				
				//信息提示框
				var sptxtPsw = document.getElementById("spanUserTel");
				if(txtPsw == null || txtPsw == ""){		
					
					//错误提示信息
					//提示信息					
					sptxtPsw.innerHTML = "请输入您的电话！";
					sptxtPsw.style.color = "#B92C28";
					return false;
				}else{
					//验证通过  清空提示内容
					sptxtPsw.innerHTML = "";
					return true;
				}
		}
		
			function checkUserTel(){
			//密码非空验证
				var txtPsw = document.getElementById("userTel").value;
				
				//信息提示框
				var sptxtPsw = document.getElementById("spanUserTel");
				if(txtPsw == null || txtPsw == ""){		
					
					//错误提示信息
					//提示信息					
					sptxtPsw.innerHTML = "请输入您的电话！";
					sptxtPsw.style.color = "#B92C28";
					return false;
				}else{
					//验证通过  清空提示内容
					sptxtPsw.innerHTML = "";
					return true;
				}
		   }
		
			function checkUserAge(){
				//密码非空验证
					var txtAge = document.getElementById("userAge").value;
					
					//信息提示框
					var sptxtAge = document.getElementById("spanUserAge");
					if(txtAge == null || txtAge == ""){		
						
						//错误提示信息
						//提示信息					
						sptxtAge.innerHTML = "请选择年龄！";
						sptxtAge.style.color = "#B92C28";
						return false;
					}else{
						//验证通过  清空提示内容
						sptxtAge.innerHTML = "";
						return true;
					}
			   }			
						
						
						
			function checkUserAdress(){
			//密码非空验证
				var txtPsw = document.getElementById("userAddress").value;
				
				//信息提示框
				var sptxtPsw = document.getElementById("spanUserAddress");
				if(txtPsw == null || txtPsw == ""){		
					
					//错误提示信息
					//提示信息					
					sptxtPsw.innerHTML = "请输入您的地址！";
					sptxtPsw.style.color = "#B92C28";
					return false;
				}else{
					//验证通过  清空提示内容
					sptxtPsw.innerHTML = "";
					return true;
				}
		   }

		
		function checkAll(){
			//用户名验证
			var ischName = checkName();
			//密码验证
			var ischPswBefor = checkPassword();
			
			var ischePswNow=checkPasswordTrue();

			var ischeUserTel=checkUserTel();			
			
			var ischeUserAdress=checkUserAdress();
			
			var ischecheckSex=checkSex();
			
			var ischeUserAge=checkUserAge();
			
			if(ischName && ischPswBefor && ischePswNow && ischeUserTel && ischeUserAdress&& ischecheckSex&&ischeUserAge){
				//验证通过
				return true;
			}else{				
				return false;
			}
		}
		
		
		</script>

<%
	String path = request.getContextPath();
	// 获得本项目的地址(例如: http://localhost:8080/MyApp/)赋值给basePath变量 
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	// 将 "项目路径basePath" 放入pageContext中，待以后用EL表达式读出。 
	pageContext.setAttribute("basePath", basePath);
	//out.write(basePath);
%>
  </head>
     <body>
     	
     	<div id="add">
     		
     		<div class="page-header">
      	 <h1><span class="glyphicon glyphicon-leaf"></span>&nbsp;&nbsp;&nbsp;信&nbsp;息&nbsp;录&nbsp;入</h1>
     	</div>
      	 <form action="<%=basePath %>TeacherInfoManager" method="post">
      	 <input type="hidden" id="userId" name="userId" value="${requestScope.userScope.userid }">
     	<div class="row">
      	 <div class="col-md-4" align="center"><font face="仿宋" size="4">输&nbsp;入&nbsp;用&nbsp;户&nbsp;名</font></div>
        	 <div class="col-md-5">
        	 <input type="mystyle" class="form-control" id="userName" name="userName" value="${requestScope.userScope.username }" placeholder="请输入用户名" onblur="checkName();">
      	 </div>
      	 <div class="col-md-3"><span id="spanUserName"></span></div>
     	</div>
     	<hr />
     	<div class="row">
      	 <div class="col-md-4" align="center"><font face="仿宋" size="4">请&nbsp;输&nbsp;入&nbsp;密&nbsp;码</font></div>
      	 <div class="col-md-5">
        	 <input type="password" class="form-control" id="userPassword" name="userPassword" value="${requestScope.userScope.userpassword }" placeholder="请输入用户密码" onblur="checkPassword()";>
      	 </div>
      	 <div class="col-md-3"><span id="spanUserPassword"></span></div>
     	</div>
     	<hr />
     	<div class="row">
      	 <div class="col-md-4" align="center"><font face="仿宋" size="4">请&nbsp;确&nbsp;定&nbsp;密&nbsp;码</font></div>
      	 <div class="col-md-5">
        	 <input type="password" class="form-control" id="userPasswordtrue" name="userPasswordtrue" value="${requestScope.userScope.userpassword }" placeholder="请确定用户密码" onblur="checkPasswordTrue()";>
      	 </div>
      	 <div class="col-md-3"><span id="spanUserPasswordtrue"></span></div>
     	</div>
     	<hr />
     	<div class="row">
     	<input type="hidden" name="hiddenUserAge" value="${requestScope.userScope.userage}">
      	 <div class="col-md-4" align="center"><font face="仿宋" size="4">请&nbsp;输&nbsp;入&nbsp;年&nbsp;龄</font></div>
      	 <div class="col-md-5">
      	 <select class="form-control" id="userAge" name="userAge">
       	  <option id="s1">15</option>
       	  <option id="s2">16</option>
       	  <option id="s3">17</option>
       	  <option id="s4">18</option>
       	  <option id="s5">19</option>
      	 </select></div>
      	 <div class="col-md-3"><span id="spanUserAge"></span></div>
      	 
     	</div>
     	<hr />
     	<div class="row">
      	 <input type="hidden" name="hiddenUserSex" value="${requestScope.userScope.usersex}">
      	 <div class="col-md-4" align="center"><font face="仿宋" size="4">请&nbsp;确&nbsp;定&nbsp;性&nbsp;别</font></div>
      	 <div class="col-md-5">
        <div class=" col-md-6">
          <!--<label>
           	  <input type="radio" name="userSex" id="userSex" value="男"  onclick="checkSex();" ${requestScope.checkM}
           	  />男</label>
                </div>
                <div class=" col-md-6">
         	  <label>
          	   <input type="radio" name="userSex" id="userSex" value="女" onclick="checkSex();" ${requestScope.checkWM}
          	   >
           	  女
         	  </label>-->
         	<label>
           	  <input type="radio" name="userSex" id="userSex" value="男"  onclick="checkSex();" 
           	  />男</label>
                </div>
                <div class=" col-md-6">
         	  <label>
          	   <input type="radio" name="userSex" id="userSex" value="女" onclick="checkSex();"
          	   >
           	  女
         	  </label>
       	  </div>
       	  </div>
      	 <div class="col-md-3"><span id="spanUserSex"></span></div>       	  
       	  
      	 </div>
      	 <hr />
      	 <div class="row">
      	 <div class="col-md-4" align="center"><font face="仿宋" size="4">请&nbsp;输&nbsp;入&nbsp;电&nbsp;话</font></div>
      	 <div class="col-md-5">
        	 <input type="mystyle" class="form-control" id="userTel" name="userTel" value="${requestScope.userScope.usertel }" placeholder="请输入您的电话" onblur="checkUserTel();">
      	 </div>
      	 <div class="col-md-3"><span id="spanUserTel"></span></div>
     	</div>
      	 <hr />
      	<div class="row">
      	 <div class="col-md-4" align="center"><font face="仿宋" size="4">请&nbsp;输&nbsp;入&nbsp;地&nbsp;址</font></div>
      	 <div class="col-md-5">
        	 <input type="mystyle" class="form-control" id="userAddress" name="userAddress" value="${requestScope.userScope.useradress }" placeholder="请输入您的地址" onblur="checkUserAdress();">
      	 </div>
      	 <div class="col-md-3"><span id="spanUserAddress"></span></div>
     	</div>
      	 <hr />
      <div class="row">
        	 <div class="col-sm-offset-2 col-md-2" >
        	   <button type="submit" class="btn btn-default" onclick="return checkAll();">&nbsp;提&nbsp;&nbsp;&nbsp;交&nbsp;</button>
        	 </div>
        	 <div class="col-sm-offset-2 col-md-4">
        	   <button type="reset" class="btn btn-default" style="column-span: all;">&nbsp;重&nbsp;&nbsp;&nbsp;置&nbsp;</button>
        	 </div>
       	</div>
</form>      	 
     	</div>
     	


<!-- Bootstrap core JavaScript
================================================== -->



<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="bootstrap/js/ie10-viewport-bug-workaround.js"></script>


  </body>
</html>
